<template>
  <div>
    <table cellspacing="0" class="table">
      <thead>
        <tr>
          <th width="50"><Checkbox v-model="selectAll" @on-change="onSelectAll" /></th>
          <th width="20" />
          <th v-for="item in listData" :key="item.id">{{ item.title }}</th>
        </tr>
      </thead>
      <tbody v-for="item in viewData" :key="item.id">
        <tr>
          <td><Checkbox v-model="item.checked" @on-change="onJoinSaleCheck(item)" /></td>
          <td class="cursor-title">
            <Icon v-if="item.showChildren" type="ios-arrow-down" size="20" @click="onShowChild(item)" />
            <Icon v-if="item.productSkuList && item.productSkuList.length && !item.showChildren" type="ios-arrow-forward" size="20" @click="onShowChild(item)" />
          </td>
          <td>{{ item.code }}</td>
          <td>-</td>
          <td class="cursor-title" :title="item.title">
            <div class=" flex-start">
              <!-- <img :src="$store.state.moreSale.imgSrc+item.productPrimaryImg+'_90w'" alt=""> -->
              <span class="e2">{{ item.title }}</span>
            </div>
          </td>
          <td>{{ getMinMaxValue(item.productSkuList, {index: 'salePrice'}) }}</td>
          <td width="200">
            <Input v-model="item.discount" :min="0" style="width:60px" :max="999" @on-blur="onSetDiscount(item)" /> 折，减<Input v-model="item.reduce" class="w40 ml" style="width:60px;" @on-blur="onSetReduce(item)" />
          </td>
          <td>
            <Input v-model="item.sale" class="w40" style="width:60px" @on-blur="onSetSale(item)" />
          </td>
          <!-- 限购数量 -->
          <!-- <td>
            <Input class="w60" style="width:60px" :disabled="isShowDrop" @on-blur="onSetQuantity(item)"  v-model="item.limitQuantity"/>
          </td> -->
          <!-- 库存限制 -->
          <td>
            <Input v-model="item.sellOutQuantity" class="w40" style="width:60px;" :disabled="!isShowDrop" @on-blur="onSetsellOutQuantity(item)" />
          </td>
          <td>{{ item.reduce }}</td>
          <td>{{ item.isShelf | status }}</td>
          <td>{{ getSum(item.productSkuList, {index: 'stock'}) }}</td>
          <td>
            <Button v-show="!item.buttonChecked" type="primary" size="small" @click="onJoinSale(item)">加入促销</Button>
            <Button v-show="item.buttonChecked" size="small" @click="onJoinSale(item)">撤出促销</Button>
          </td>
        </tr>
        <template v-if="item.productSkuList && item.productSkuList.length">
          <tr v-for="child in item.productSkuList" v-show="item.showChildren" :key="child.id">
            <td />
            <td />
            <td><Checkbox v-model="child.checked" @on-change="onJoinSaleCheck(child,item)" /></td>
            <td>{{ child.code }}</td>
            <td class="cursor-title" :title="item.title">
              <div class="flex-start">
                <!-- <img :src="$store.state.moreSale.imgSrc+item.productPrimaryImg+'_90w'" alt=""> -->
                <span class="e2">{{ item.title }}</span>
              </div>
            </td>
            <td>{{ child.salePrice }}</td>
            <td width="200">
              <Input v-model="child.discount" style="width:60px" :min="0" :max="999" @on-blur="onSetDiscount(child, item)" /> 折，减<Input v-model="child.reduce" class="w40 ml" style="width:60px;" @on-blur="onSetReduce(child, item)" />
            </td>
            <td>
              <Input v-model="child.sale" class="w60" style="width:60px" @on-blur="onSetSale(child, item)" />
              <div v-show="child.discount&&child.discount<6" class="notice-red">需大于6折</div>
            </td>
            <!-- 限购数量 -->
            <!-- <td>
              <Input class="w60" style="width:60px" :disabled="isShowDrop" @on-blur="onSetQuantity(child, item)"  v-model="child.limitQuantity"/>
            </td> -->
            <!-- 库存限制 -->
            <td>
              <Input v-model="child.sellOutQuantity" class="w40" style="width:60px;" :disabled="!isShowDrop" @on-blur="onSetsellOutQuantity(child, item)" />
            </td>
            <td>{{ child.reduce }}</td>
            <td>{{ item.isShelf | status }}</td>
            <td>{{ child.stock }}</td>
            <td>
              <Button v-show="!child.buttonChecked" type="primary" size="small" @click="onJoinSale(child, item)">加入促销</Button>
              <Button v-show="child.buttonChecked" size="small" @click="onJoinSale(child, item)">撤出促销</Button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <div class="pager">
      <Page
        :total="totalItem"
        :current="currentPage"
        :page-size="pageSize"
        show-sizer
        placement="top"
        @on-change="onPageChange"
        @on-page-size-change="onPageSizeChange"
      />
    </div>
    <Loader :status="status" @refresh="getData" />
  </div>
</template>
<script>
import { getMinValue, getMaxValue, getSum } from '@/views/sales/common/TableSaleMethods'
import { mapGetters } from 'vuex'
export default {
  props: {
    listData: '',
    list: '',
    status: ''
  },
  data () {
    return {
      selectAll: false,
      totalItem: 1,
      pageSize: window.$pageSize,
      currentPage: 1,
      viewData: []
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      this.totalItem = this.list.length
      this.viewData = this.list.slice(0, this.pageSize)
    },
    getSum (param, object) {
      return getSum(param, object)
    },
    getMinMaxValue (param, object) {
      if (getMinValue(param, object) == getMaxValue(param, object)) {
        return `[${getMinValue(param, object)}]`
      } else {
        return `[${getMinValue(param, object)}-${getMaxValue(param, object)}]`
      }
    },
    // 促销库存
    onSetsellOutQuantity (child, item) {
      this.$emit('onSetsellOutQuantity', child, item)
    },
    // 限制回购设置
    onSetQuantity (child, item) {
      this.$emit('onSetQuantity', child, item)
    },
    // 打折控制
    onSetDiscount (child, item) {
      this.$emit('onSetDiscount', child, item)
    },
    onSetReduce (child, item) {
      this.$emit('onSetReduce', child, item)
    },
    onSetSale (child, item) {
      this.$emit('onSetSale', child, item)
    },
    onSelectAll () {
      // 全选 、全不选
      this.$emit('onChangeSelectAll', this.selectAll)
    },
    onJoinSale (child, item) {
      this.$emit('onJoinSale', child, item)
    },
    onShowChild (item) {
      this.$emit('onShowChild', item)
    },
    onJoinSaleCheck (child, item) {
      this.$emit('onJoinSaleCheck', child, item, this.selectAll)
    },
    onPageChange (val) {
      this.viewData = this.list.slice(((val - 1) * this.pageSize), val * this.pageSize)
    },
    onPageSizeChange (val) {
      this.pageSize = val
      this.viewData = this.list.slice(0, val)
    }
  },
  computed: {
    ...mapGetters([
      'isShowDrop'
    ])
  },
  filters: {
    status (val) {
      if (val) {
        return '上架'
      } else {
        return '下架'
      }
    }
  },
  watch: {
    list () {
      this.initData()
    }
  }
}
</script>

